<template>
  <!--<div>-->
    <!--<div class="star-bg">-->
      <!--<star :starNumber="20" :w="4" :h="4"></star>-->
    <!--</div>-->
  <!--</div>-->
  <center>
  <div style="margin-top: 100px;width: 1000px">
    <v-carousel show-arrows-on-hover>
      <v-carousel-item
          v-for="(item,i) in items"
          :key="i"
          :src="item.src"
          reverse-transition="fade-transition"
          transition="fade-transition"
      ></v-carousel-item>
      <!-- 简介 -->
      <div class="header-info">
        <p>若兮万物生 - 若兮开发团队</p>
      </div>
    </v-carousel>
    </div>
    <v-btn
        color="blue-grey"
        class="ma-2 white--text"
        @click="loader = 'loading3'"
    >
      <v-icon
          medium
          color="teal darken-2"
      >
        mdi-email
      </v-icon>
      <el-badge :value="1" class="item" type="primary">
        站内信
      </el-badge>
    </v-btn>
    <div>
      <v-btn
          class="mx-2"
          fab
          dark
          x-small
          color="pink"
      >
        <v-icon dark>
          mdi-heart
        </v-icon>
      </v-btn>
    </div>
  </center>
</template>

<script>
	export default {
		data () {
			return {
				items: [
					{
						src: 'https://cdn.vuetifyjs.com/images/carousel/squirrel.jpg',
					},
					{
						src: 'https://cdn.vuetifyjs.com/images/carousel/sky.jpg',
					},
					{
						src: 'https://cdn.vuetifyjs.com/images/carousel/bird.jpg',
					},
					{
						src: 'https://cdn.vuetifyjs.com/images/carousel/planet.jpg',
					},
				],
			}
		},
	}
</script>

<style scoped>

</style>
